在前幾天的練習中，我們學會了變數、條件、迴圈與函式，讓程式能執行邏輯。
但如果想要讓網頁對使用者的動作有反應，就需要用到「事件（Event）」！

事件是使用者在網頁上觸發的動作，像是：

onclick：按下按鈕時

oninput：輸入文字時

onmouseover：滑鼠移入時

onchange：選單內容改變時

透過事件，我們能讓 JavaScript 在這些動作發生時自動執行程式。

範例 1：按鈕點擊觸發訊息

<button onclick="sayHi()">點我一下</button>

<script>
  function sayHi() {
    alert("哈囉！你剛剛按了按鈕 😄");
  }
</script>

範例 2：即時顯示輸入內容

<input type="text" oninput="showText(this.value)" placeholder="輸入文字試試">
<p id="output"></p>

<script>
  function showText(text) {
    document.getElementById("output").innerText = "你輸入的是：" + text;
  }
</script>

範例 3：滑鼠移動改變背景顏色

<div onmousemove="changeColor()" style="width:200px; height:100px; background:lightgray;">
  把滑鼠移過來～
</div>

<script>
  function changeColor() {
    document.body.style.backgroundColor = "lightyellow";
  }
</script>

學習心得：
我覺得事件就像是「使用者和網頁之間的橋樑」。
只要使用者一動作，程式就能立刻做出回應，讓網頁變得更有互動性。
以前覺得網頁的互動很神奇，現在知道其實是透過事件監聽（event handling）實現的。
掌握這個概念後，就能做出按鈕切換、即時顯示文字、甚至小遊戲等互動功能，真的非常有趣！